<template>
  <div>
    <div class="card">
      <div class="title bold">{{ jobData.job_name }}</div>
      <div class="des">
        <div class="jobDes">
          <el-icon :size="14" class="des-icon">
            <i-ep-Location />
          </el-icon>
          <span>{{ jobData.company_location }}</span>
        </div>
        <div class="jobDes">
          <el-icon :size="14" class="des-icon">
            <i-ep-OfficeBuilding />
          </el-icon>
          <span>{{ jobData.company_cat }}</span>
        </div>
      </div>
      <div class="company">
        <span class="company-name">{{ jobData.company_name }}</span>
        <span class="company-status">{{ jobData.company_scale }}</span>
      </div>
      <div class="hr">
        <img src="@/assets/img/avatar.svg" class="hr-avatar">
        <span>{{ jobData.company_hr }}</span>
      </div>
      <div class="salary">{{ jobData.job_salary }}</div>
    </div>

    <div class="card">
      <div class="title bold">岗位要求</div>
      <div class="jobDetail">
        <div>
          <span v-html="jobData.job_requirement">
          </span>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="title bold">职位描述</div>
      <div>
         <span class="tag" v-for="(item,index) in splitLabels(jobData.job_label)" :key="index">
            {{ item }}
        </span>
      </div>
      <div class="jobDetail" v-html="jobData.job_description"></div>
    </div>
    <div class="submit">
      <el-button @click="showDrawer" type="primary" round size="large">投递简历</el-button>
      <!-- 抽屉组件 -->
      <el-drawer v-model="drawer" :with-header="false" direction="btt">
        <div class="vitaeList" v-for="item in vitaeData" :key="item.cid" @click="sendVitae(jobData.rid, item.cid)">
          <el-icon :size="16" class="vitaeListIcon"><i-ep-DocumentAdd /></el-icon>
          {{ item.job_name }}
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script setup>
import  { ref, inject ,watch} from 'vue'
import { useRouter } from 'vue-router'
import checkLoginStatus  from "@/hooks/checkLoginStatus.js";
import login from "@/hooks/login.js";
const router = useRouter()
const $root = inject('$root')
const $axios = inject('$axios')
const jobData = ref({})
const drawer = ref(false)
const vitaeData=ref([])
// 获取详情岗位数据
const getJobDetail = () => {
  // 获取岗位id
  // @ts-ignore
  let rid = router.currentRoute.value.params.id
  $axios.get($root + `/recruit/${rid}/`).then((res) => {
    console.log(res.data.data)
    jobData.value = res.data.data
    //使用正则替换换行符号
    // @ts-ignore
    jobData.value.job_requirement = jobData.value.job_requirement.replace(/(\r\n)|(\n)/g, '<br>')
    // @ts-ignore
    jobData.value.job_description = jobData.value.job_description.replace(/(\r\n)|(\n)/g, '<br>')

  })
  // 获取岗位详情
}
getJobDetail()

//显示抽屉组件
const showDrawer = () => {
  checkLoginStatus(getVitaeData,login)
  drawer.value = true
}
//获取简历数据
const getVitaeData = () => {
  $axios.get($root + `/curri/`).then(r => {
    console.log(r)
    vitaeData.value = r.data.data
    drawer.value = true
  })
}
//投递简历
const sendVitae = (rid,cid) => {
  $axios.post($root + `postresume/` ,{
    // 招聘ID
    "rid": rid,
    // 简历ID
    "cid": cid
  }).then(r=>{
    if (r.data.data==200){
      console.log(r)
      ElMessage({
        message: '投递成功',
        type: 'success',
      })
    }
    else {
        ElMessage.error('投递失败')
    }
    drawer.value=false
      }
  )
}

// 标签分割
const splitLabels = (str) => {
  if (str)
    return str.split(';')
}
// 使用`watch`方法监听页面路由，当重新加载 "jobDetail"组件时，需要重新向服务端获取岗位详情数据。
// @ts-ignore
watch(() => router.currentRoute.value.name, (name) => {
if (name === 'jobDetail')
  getJobDetail()
}, { immediate: true ,deep: true })
</script>

<style scoped>
.vitaeList {
  height: 40px;
  border-bottom: 1px dashed #d7d7d7;
  color: #999;
  line-height: 40px;
}

.vitaeListIcon {
  position: relative;
  top: 2px;
  margin-right: 2px;
}
</style>
